<div class="left">
  <app-rank-list headerTitle="降碳排名" [pgList]="pgList" unit="kg"></app-rank-list>
</div>
<div class="right">
  <div class="drop">
    <a nz-dropdown [nzDropdownMenu]="menu" nzPlacement="bottomCenter">
      <div class="date">
        <span>{{ dates[datesIndex] }}</span>
      </div>
      <span nz-icon nzType="down" class="icon"></span>
    </a>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu nzSelectable>
        <li *ngFor="let date of dates;index as i" nz-menu-item (click)="changeDate(i)">
          {{ date }}
        </li>
      </ul>
    </nz-dropdown-menu>
  </div>
  <div class="carb-container">
    <div class="carb-items" *ngFor="let item of mkList">
      <span class="top">{{ item.name }}</span>
      <div class="line"></div>
      <span class="bottom">{{ item.price }}{{ item.unit }}</span>
    </div>
  </div>
</div>
